<template>
  <div>
    <!-- 主页 -->
    <topitem :num="num" @loginmethod="loginmethod" :loginstate="loginstate"></topitem>

    <!-- 轮播图 -->
    <div class="image">
              <div class="img-box">
                <img src="../assets/img/01.png" alt="" :class="Carouselchart==1?'disply':'con'" >
                <img src="../assets/img/02.jpeg" alt="" :class="Carouselchart==2?'disply':'con'" >
                <img src="../assets/img/03.jpeg" alt="" :class="Carouselchart==3?'disply':'con'" >
                <img src="../assets/img/04.jpeg" alt="" :class="Carouselchart==4?'disply':'con'" >
                <img src="../assets/img/05.jpeg" alt="" :class="Carouselchart==5?'disply':'con'" >
              </div>
              <div class="mb"></div>
              <div class="container">
                  <div class="box">
                      <img src="../assets/img/banner-cat-ear.png" alt="">
                      <ul class="">
                          <li @mouseenter="Carouselchart=1" :class="{'con':Carouselchart==1}">
                              <h3><a href="">大仙尊决战科技文明</a></h3>
                              <p>悲惨少年异世成就魔尊归来</p>
                          </li>
                          <li @mouseenter="Carouselchart=2" :class="{'con':Carouselchart==2}">
                              <h3><a href="">你一笑就甜倒我八颗牙</a></h3>
                              <p>百年一遇流星雨带来的沙雕甜宠蜜恋</p>
                          </li>
                          <li @mouseenter="Carouselchart=3" :class="{'con':Carouselchart==3}">
                              <h3><a href="">摩耶·人间玉</a></h3>
                              <p>新婚之夜表面夫妻，他却对她动了心</p>
                          </li>
                          <li @mouseenter="Carouselchart=4" :class="{'con':Carouselchart==4}">
                              <h3><a href="">修罗剑尊</a></h3>
                              <p>天才少年，一剑灭青云，一剑断万古</p>
                          </li>
                          <li @mouseenter="Carouselchart=5" :class="{'con':Carouselchart==5}">
                              <h3><a href="">龙腾战尊</a></h3>
                              <p>得一缕龙魂，修无上功法，登临巅峰</p>
                          </li>
                      </ul>
                  </div>
              </div>
    </div>

    <!-- 分类 -->
    <div class="list container">
        <div class="box clearfix">
            <ul>
                <li><i></i></li>
                <li><a href="">完结</a></li>
                <li><a href="">连载</a></li>
                <li><i></i></li>
                <li><a href="">热血</a></li>
                <li><a href="">恋爱</a></li>
                <li><a href="">玄幻</a></li>
                <li><a href="">神魔</a></li>
                <li><a href="">都市</a></li>
                <li><a href="">霸总</a></li>
                <li><a href="">穿越</a></li>
                <li><a href="">搞笑</a></li>
                <li><a href="">冒险</a></li>
                <li><a href="">古风</a></li>
                <li><a href="">生活</a></li>
                <li><a href="">竞技</a></li>
                <li><a href="">动作</a></li>
                <li><a href="">悬疑</a></li>
                <li><a href="">武侠</a></li>
                <li><a href="">科幻</a></li>
                <li><a href="">恐怖</a></li>
                <li><a href="">完结</a></li>
            </ul>
            <a href="" class="a1">全部<i class="big ift-xpaopaohui"></i></a>
        </div>
    </div>

    <div class="fg">
        <img src="../assets/img/cloud-line.png" alt="">
    </div>
    <!-- 小编推荐 -->
    <div class="content clearfix" id="tj">
        <div class="title"><i></i><h2>小编推荐</h2></div>
        <div class="box fl">
            <div class="item">
                <a href="" @click="JumpDetails(1)">
                    <img src="../assets/img/001.webp" alt="">
                    <div class="mb"></div>
                </a>
                <h3><a href="" @click="JumpDetails(1)">龙腾战尊</a></h3>
                <p>得一缕龙魂，修无上功法，登临巅峰</p>
                <div class="star">4.7</div>
            </div>
        </div>
        <div class="item2 fl" v-for="(item,index) in readdata.slice(1,5)" :key="index">
            <div class="item-if">
                <a href="" @click="JumpDetails(item.id)">
                    <div class="if-img">
                        <img :src="item.img" alt="">
                        <div class="mb"></div>
                    </div>
                    <!-- 弹出页面 -->
                    <div class="item-box">
                        <div class="item-img">
                            <img :src="item.imgs" alt="">
                        </div>
                        <div class="item-lists">
                            <h3>{{item.title}}</h3>
                            <div class="item-text">
                                <span>{{item.score}}</span>{{item.scorespan}}
                            </div>
                            <ul class="clearfix">
                                <li><a href="">热血</a></li>
                                <li><a href="">恋爱</a></li>
                                <li><a href="">玄幻</a></li>
                            </ul>
                            <a>{{item.chapter}}</a>
                            <p>{{item.content}}</p>
                        </div>
                        <button @click="JumpDetails(item.id)"><i class="cat-top"></i>开始阅读</button> 
                    </div>
                </a>
                
            </div>
            <h3><a href="">{{item.title}}</a></h3>
            <p>{{item.p}}</p>
            <div class="star"><span>{{item.score}}</span>{{item.scorespan}}</div>
        </div>
        
    </div>
    <!-- 每日更新 -->
    <div class="content clearfix mr" id="everyday">
        <div class="title">
            <i></i>
            <h2>每日更新</h2>
            <ul class="clearfix">
                <li>
                    <span>今天</span>
                </li>
                <li>
                    <span>昨天</span>
                </li>
                <li>
                    <span>周三</span>
                </li>
                <li>
                    <span>周二</span>
                </li>
                <li>
                    <span>周一</span>
                </li>
                <li>
                    <span>周日</span>
                </li>
                <li>
                    <span>周六</span>
                </li>
            </ul>
        </div>
        <div class="clearfix">
            <div class="item2 fl" v-for="(item,index) in everyday.slice(0,datalength)" :key="index" >
                <div class="item-if">
                    <a href="">
                        <div class="if-img">
                            <img :src="item.vertical_image_url" alt="">
                            <div class="mb"></div>
                        </div>
                        <!-- 弹出页面 -->
                        <div class="item-box">
                            <div class="item-img">
                                <img :src="item.cover_image_url" alt="">
                            </div>
                            <div class="item-lists">
                                <h3>{{item.title}}</h3>
                                <div class="item-text">
                                    <span>4</span>.7
                                </div>
                                <ul class="clearfix">
                                    <li v-for="(ite,index) in item.tags.slice(0,3)" :key="index"><a href="">{{ite}}</a></li>
                                </ul>
                                <a>{{item.update_remind}}</a>
                                <p>{{item.description}}</p>
                            </div>
                            <button><i class="cat-top"></i>开始阅读</button> 
                        </div>
                    </a>
                    
                </div>
            <h3><a href="">{{item.title}}</a></h3>
            <p>{{item.description}}</p>
            <div class="star"><span>4</span>.7</div>
            </div>
            
        
        </div>
        <div class="boxs"></div>
        <div class="ck" @click="addincrease" v-show="datalength==12">查看更多<i class="arrow ift-more-bottom"></i> </div>
        <div class="ck" @click="addreduce" v-show="datalength==20">全部收起 <i class="arrow ift-more-top"></i> </div>
    </div>
    <!-- 动态漫画 -->
    <div class="content clearfix dt" id="dynamic">
        <div class="title">
            <i></i>
            <h2>动态漫画</h2>
            <a href="" class="a1">更多<i class="big ift-xpaopaohui"></i></a>
        </div>
        <div class="clearfix">
            <div class="item2 fl" v-for="(item,index) in everyday.slice(10,20)" :key="index">
                <a href="">
                    <img :src="item.cover_image_url" alt="">
                    <div class="mb"></div>
                    <div class="bf"></div>
                </a>
                <h3><a href="">{{item.title}}</a></h3>
                <p>{{item.description}}</p>
            </div>
        </div>
    </div>
    <!-- VIP精品 -->
    <div class="content clearfix vip" id="vip">
        <div class="title"><i></i><h2>VIP精品</h2></div>
        <div class="box fl">
            <div class="item">
                <a href="">
                    <img src="../assets/img/b01.webp" alt="">
                    <div class="mb"></div>
                </a>
                <h3><a href="">龙腾战尊</a></h3>
                <p>得一缕龙魂，修无上功法，登临巅峰</p>
                <div class="star">4.7</div>
            </div>
        </div>
        <div class="item2 fl" v-for="(item,index) in vipdata.slice(0,8) " :key="index">
            <a href="">
                <img :src="item.cover_image_url" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href=""></a>{{item.title}}</h3>
            <p>{{item.update_remind}}</p>
            <div class="star"><span>4</span>.7</div>
        </div>
        <!-- <div class="item2 fl">
            <a href="">
                <img src="../assets/img/003.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">大仙尊决战科技文明</a></h3>
            <p>悲惨少年异世成就魔尊归来</p>
            <div class="star"><span>4</span>.6</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/004.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">长相思</a></h3>
            <p>上古神族之间的绝美旷世之恋</p>
            <div class="star"><span>4</span>.8</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/002.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">逆天毒妃</a></h3>
            <p>高冷腹黑王爷vs重生天才少女！</p>
            <div class="star"><span>4</span>.7</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/003.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">大仙尊决战科技文明</a></h3>
            <p>悲惨少年异世成就魔尊归来</p>
            <div class="star"><span>4</span>.6</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/004.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">长相思</a></h3>
            <p>上古神族之间的绝美旷世之恋</p>
            <div class="star"><span>4</span>.8</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/003.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">大仙尊决战科技文明</a></h3>
            <p>悲惨少年异世成就魔尊归来</p>
            <div class="star"><span>4</span>.6</div>
        </div>
        <div class="item2 fl">
            <a href="">
                <img src="../assets/img/004.webp" alt="">
                <div class="mb"></div>
            </a>
            <h3><a href="">长相思</a></h3>
            <p>上古神族之间的绝美旷世之恋</p>
            <div class="star"><span>4</span>.8</div>
        </div> -->
    </div>
    <!-- 热门分类 -->
    <div class="content clearfix rm" id="hot">
        <div class="title">
            <i></i>
            <h2>热门分类</h2>
            <ul class="clearfix">
                <li>
                    <span>热血</span>
                </li>
                <li>
                    <span>霸总</span>
                </li>
                <li>
                    <span>恋爱</span>
                </li>
                <li>
                    <span>都市</span>
                </li>
                <li>
                    <span>穿越</span>
                </li>
                <li>
                    <span>玄幻</span>
                </li>
                <li>
                    <span>修真</span>
                </li>
                <li>
                    <span>冒险</span>
                </li>
                <li>
                    <span>搞笑</span>
                </li>
                <li>
                    <span>古风</span>
                </li>
            </ul>
            <a href="" class="a1">更多<i class="big ift-xpaopaohui"></i></a>
        </div>
        <div class="clearfix">
            <div class="item2 fl" v-for="(item,index) in hotdata.slice(0,6) " :key="index">
                <a href="">
                    <img :src="item.vertical_image_url" alt="">
                    <div class="mb"></div>
                </a>
                <div class="box">
                    <h3><a href="">{{item.title}}</a></h3>
                    <ul>
                        <li v-for="(ite,index) in item.tags.slice(0,3)" :key="index"><a href="">{{ite}}</a></li>
                    </ul>
                    <p>{{item.description}}</p>
                    <div class="sun"><i class="imp ift-renqi"></i> 215亿</div>
                    <div class="gx">更至 <a href="">{{item.update_remind}}</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="fg">
        <img src="../assets/img/cloud-line.png" alt="">
    </div>
    <!-- 人气排行 -->
    <div class="content clearfix rq" id="popularity">
        <div class="title">
            <i></i>
            <h2>人气排行</h2>
            <ul class="clearfix">
                <li>
                    <span>综合榜</span>
                </li>
                <li>
                    <span>自制榜</span>
                </li>
                <li>
                    <span>少年榜</span>
                </li>
                <li>
                    <span>少女榜</span>
                </li>
                <li>
                    <span>新作榜</span>
                </li>
                <li>
                    <span>黑马榜</span>
                </li>
                <li>
                    <span>付费榜</span>
                </li>
                <li>
                    <span>免费榜</span>
                </li>
                <li>
                    <span>完结榜</span>
                </li>
                <li>
                    <span>连载榜</span>
                </li>
            </ul>
            <div class="item">
                <div class="con">1-50</div>
                <div>51-100</div>
            </div>
        </div>
        <div class="item3">
            <ul>
                <li>
                    <div class="tp1"></div>
                    <div class="text">
                        <div class="package">
                            <a href="">战神狂妃：凤倾天下</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                <img src="../assets/img/rq01.webp" alt="">
                                <div class="subject">
                                    <em></em>
                                    <h3><a href="">战神狂妃：凤倾天下</a></h3>
                                    <ul>
                                        <li><a href="">热血</a></li>
                                        <li><a href="">修真</a></li>
                                        <li><a href="">玄幻</a></li>
                                    </ul>
                                    <p>从零开始的逆袭修仙之路！！</p>
                                    <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                    <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp2"></div>
                    <div class="text">
                        <div class="package">
                            <a href="">少帅每天都在吃醋</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">少帅每天都在吃醋</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp3"></div>
                    <div class="text">
                        <div class="package">
                            <a href="">吞噬永恒</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">吞噬永恒</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">4</div>
                    <div class="text">
                        <div class="package">
                            <a href="">仙武帝尊</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">仙武帝尊</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">5</div>
                    <div class="text">
                        <div class="package">
                            <a href="">我被困在同一天十万年</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">我被困在同一天十万年</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">6</div>
                    <div class="text">
                        <div class="package">
                            <a href="">逆天邪神</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">逆天邪神</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">7</div>
                    <div class="text">
                        
                        <div class="package">
                            <a href="">武道独尊</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">武道独尊</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">8</div>
                    <div class="text">
                        
                        <div class="package">
                            <a href="">寻找前世之旅</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">寻找前世之旅</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">9</div>
                    <div class="text">
                        
                        <div class="package">
                            <a href="">风起苍岚</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">风起苍岚</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="tp">10</div>
                    <div class="text">
                        
                        <div class="package">
                            <a href="">妖神记</a>
                            <!-- 提示漫画弹框 -->
                            <div class="tips">
                                    <img src="../assets/img/rq01.webp" alt="">
                                    <div class="subject">
                                        <em></em>
                                        <h3><a href="">妖神记</a></h3>
                                        <ul>
                                            <li><a href="">热血</a></li>
                                            <li><a href="">修真</a></li>
                                            <li><a href="">玄幻</a></li>
                                        </ul>
                                        <p>从零开始的逆袭修仙之路！！</p>
                                        <div class="sun"><i class="imp ift-renqi"></i>  33.2万</div>
                                        <div class="gx">更至 <a href="">第393话 狂收肉身！</a></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="tp">11</div>
                    <div class="text">
                        <a href="">战神狂妃：凤倾天下</a>
                    </div>
                </li>
                <li>
                    <div class="tp">12</div>
                    <div class="text">
                        <a href="">少帅每天都在吃醋</a>
                    </div>
                </li>
                <li>
                    <div class="tp">13</div>
                    <div class="text">
                        <a href="">吞噬永恒</a>
                    </div>
                </li>
                <li>
                    <div class="tp">14</div>
                    <div class="text">
                        <a href="">仙武帝尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">15</div>
                    <div class="text">
                        <a href="">我被困在同一天十万年</a>
                    </div>
                </li>
                <li>
                    <div class="tp">16</div>
                    <div class="text">
                        <a href="">逆天邪神</a>
                    </div>
                </li>
                <li>
                    <div class="tp">17</div>
                    <div class="text">
                        <a href="">武道独尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">18</div>
                    <div class="text">
                        <a href="">寻找前世之旅</a>
                    </div>
                </li>
                <li>
                    <div class="tp">19</div>
                    <div class="text">
                        <a href="">风起苍岚</a>
                    </div>
                </li>
                <li>
                    <div class="tp">20</div>
                    <div class="text">
                        <a href="">妖神记</a>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="tp">21</div>
                    <div class="text">
                        <a href="">战神狂妃：凤倾天下</a>
                    </div>
                </li>
                <li>
                    <div class="tp">22</div>
                    <div class="text">
                        <a href="">少帅每天都在吃醋</a>
                    </div>
                </li>
                <li>
                    <div class="tp">23</div>
                    <div class="text">
                        <a href="">吞噬永恒</a>
                    </div>
                </li>
                <li>
                    <div class="tp">24</div>
                    <div class="text">
                        <a href="">仙武帝尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">25</div>
                    <div class="text">
                        <a href="">我被困在同一天十万年</a>
                    </div>
                </li>
                <li>
                    <div class="tp">26</div>
                    <div class="text">
                        <a href="">逆天邪神</a>
                    </div>
                </li>
                <li>
                    <div class="tp">27</div>
                    <div class="text">
                        <a href="">武道独尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">28</div>
                    <div class="text">
                        <a href="">寻找前世之旅</a>
                    </div>
                </li>
                <li>
                    <div class="tp">29</div>
                    <div class="text">
                        <a href="">风起苍岚</a>
                    </div>
                </li>
                <li>
                    <div class="tp">30</div>
                    <div class="text">
                        <a href="">妖神记</a>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="tp">31</div>
                    <div class="text">
                        <a href="">战神狂妃：凤倾天下</a>
                    </div>
                </li>
                <li>
                    <div class="tp">32</div>
                    <div class="text">
                        <a href="">少帅每天都在吃醋</a>
                    </div>
                </li>
                <li>
                    <div class="tp">33</div>
                    <div class="text">
                        <a href="">吞噬永恒</a>
                    </div>
                </li>
                <li>
                    <div class="tp">34</div>
                    <div class="text">
                        <a href="">仙武帝尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">35</div>
                    <div class="text">
                        <a href="">我被困在同一天十万年</a>
                    </div>
                </li>
                <li>
                    <div class="tp">36</div>
                    <div class="text">
                        <a href="">逆天邪神</a>
                    </div>
                </li>
                <li>
                    <div class="tp">37</div>
                    <div class="text">
                        <a href="">武道独尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">38</div>
                    <div class="text">
                        <a href="">寻找前世之旅</a>
                    </div>
                </li>
                <li>
                    <div class="tp">39</div>
                    <div class="text">
                        <a href="">风起苍岚</a>
                    </div>
                </li>
                <li>
                    <div class="tp">40</div>
                    <div class="text">
                        <a href="">妖神记</a>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="tp">41</div>
                    <div class="text">
                        <a href="">战神狂妃：凤倾天下</a>
                    </div>
                </li>
                <li>
                    <div class="tp">42</div>
                    <div class="text">
                        <a href="">少帅每天都在吃醋</a>
                    </div>
                </li>
                <li>
                    <div class="tp">43</div>
                    <div class="text">
                        <a href="">吞噬永恒</a>
                    </div>
                </li>
                <li>
                    <div class="tp">44</div>
                    <div class="text">
                        <a href="">仙武帝尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">45</div>
                    <div class="text">
                        <a href="">我被困在同一天十万年</a>
                    </div>
                </li>
                <li>
                    <div class="tp">46</div>
                    <div class="text">
                        <a href="">逆天邪神</a>
                    </div>
                </li>
                <li>
                    <div class="tp">47</div>
                    <div class="text">
                        <a href="">武道独尊</a>
                    </div>
                </li>
                <li>
                    <div class="tp">48</div>
                    <div class="text">
                        <a href="">寻找前世之旅</a>
                    </div>
                </li>
                <li>
                    <div class="tp">49</div>
                    <div class="text">
                        <a href="">风起苍岚</a>
                    </div>
                </li>
                <li>
                    <div class="tp">50</div>
                    <div class="text">
                        <a href="">妖神记</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 超赞佳作 -->
    <div class="content clearfix jz" id="good">
        <div class="title"><i></i><h2>超赞佳作</h2></div>
         <div class="item2 fl" v-for="(item,index) in hotdata.slice(5,10)" :key="index" >
                <div class="item-if">
                    <a href="">
                        <div class="if-img">
                            <img :src="item.vertical_image_url" alt="">
                            <div class="mb"></div>
                        </div>
                        <!-- 弹出页面 -->
                        <div class="item-box">
                            <div class="item-img">
                                <img :src="item.cover_image_url" alt="">
                            </div>
                            <div class="item-lists">
                                <h3>{{item.title}}</h3>
                                <div class="item-text">
                                    <span>4</span>.{{index}}
                                </div>
                                <ul class="clearfix">
                                    <li v-for="(ite,index) in item.tags.slice(0,3)" :key="index"><a href="">{{ite}}</a></li>
                                </ul>
                                <a>{{item.update_remind}}</a>
                                <p>{{item.description}}</p>
                            </div>
                            <button><i class="cat-top"></i>开始阅读</button> 
                        </div>
                    </a>
                    
                </div>
            <h3><a href="">{{item.title}}</a></h3>
            <p>{{item.description}}</p>
            <div class="star"><span>4</span>.{{index}}</div>
            </div>
         
    </div>
    <!-- 友情链接 -->
    <div class="content clearfix yq">
        <div class="title">
            <i></i>
            <h2>友情链接</h2>
        </div>
        <div class="item3">
            <ul>
                <li>
                    <div class="text">
                        <a href="">蜻蜓有声小说</a>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <a href="">斗罗大陆漫画</a>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <a href="">品牌排行榜</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">爱优漫</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">摔角网</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">壁纸族</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">漫画大全</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">搜好货网</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">法律快车网</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">看漫画</a>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <a href="">股城财经</a>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <a href="">极速动漫</a>
                    </div>
                </li>
                <li>
                    <div class="text">
                        <a href="">动漫屋</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">街机游戏</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">龙符之王道天下</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">爱问共享资料</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">中国体育直播TV</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">寻找前世之旅</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">英雄联盟
                        </a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">信用卡论坛</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">故事大全</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">发型</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">折纸艺术网</a>
                    </div>
                </li>
                <li>
                    
                    <div class="text">
                        <a href="">神漫画</a>
                    </div>
                </li>
            </ul>
        </div>
    
    </div>
    <!-- 右边固定 -->
    <div class="cat-right" v-show="navShow">
        <div class="cat-top"></div>
        <ul>
            <li><a  @click="goToAnchor('#tj')" :class="{'con':catrightnum==1}">小编推荐</a></li>
            <li><a  @click="goToAnchor('#everyday')" :class="{'con':catrightnum==2}">每日更新</a></li>
            <li><a  @click="goToAnchor('#dynamic')" :class="{'con':catrightnum==3}">动态漫画</a></li>
            <li><a  @click="goToAnchor('#vip')" :class="{'con':catrightnum==4}">VIP精品</a></li>
            <li><a  @click="goToAnchor('#hot')" :class="{'con':catrightnum==5}">热门分类</a></li>
            <li><a  @click="goToAnchor('#popularity')" :class="{'con':catrightnum==6}">人气排行</a></li>
            <li><a  @click="goToAnchor('#good')" :class="{'con':catrightnum==7}">超赞佳作</a></li>
        </ul>
        <div class="qrcode"><i class="ift-qr-code"></i></div>
        <div class="go-top" @click="addgotop"><i class="ift-more-top"></i></div>
    </div>
    <!-- 底部组件 -->
    <bigcat></bigcat> 

    <!-- 登录组件 -->
    <loginitem v-show="loginstate" @loginmethod="loginmethod"></loginitem>
    

  </div>
</template>

<script>
import topitem from "../components/TopAssembly.vue" ;
import bigcat from "../components/BottomAssembly.vue" ;
import loginitem from "../components/LoginAssembly.vue" ;
import {getrenewdata} from "../api/renew.js"
import {getreaddata} from "../api/read.js"
  export default {
    data() {
        return {
            num: 0,//头部组件高亮位置  
            loginstate:false,// 登录组件
            renewdata:[], // 数据
            everyday:[],// 每日更新
            hotdata:[],// 热门
            datalength:12,// 每日更新 数据长度
            readdata:[],// 详情页数据(非)
            top:"",// 获取浏览器滚轮
            navShow:false,// 显示隐藏-右边固定
            catrightnum:1,// 右边固定
            vipdata:[],// vip 数据
            Carouselchart:1,// 轮播图
            timer:null,
        };
    },
    created(){
            window.scrollTo(0,0),
            this.getrenewdatamethod(),
            this.getreaddatamethod()
    },
    methods:{
        // 跳转详情列表
        JumpDetails(num){
            let id = num;
            this.$router.push({path:"/details", query: { id } })
        },
        // 登录组件
        loginmethod(){
            this.loginstate = !this.loginstate;
        },
        // 返回顶部
        addgotop(){
            window.scrollTo(0,0)
        },
        // 数据
        getrenewdatamethod(){
             getrenewdata().then(data =>{
                this.renewdata = data.data  // 总数据
                this.everyday = data.data.rec_topics// 每日更新数据 
                this.vipdata = data.data.popularity_topics;
                this.hotdata = data.data.ugc_topics;
                    // console.log(data);
                    console.log(data.data);
                    // console.log(this.everyday);
             })
        },
        getreaddatamethod(){
            getreaddata().then(data =>{
                this.readdata = data.data
                // console.log(data.data[0].id);
            })
        },
        // 每日更新 数据长度
        addincrease(){
            this.datalength = 20;
        },
        // 每日更新 数据长度
        addreduce(){
            this.datalength = 12;
        },
        // 点击跳转板块
         goToAnchor(selector) {
            this.$el.querySelector(selector).scrollIntoView({
                    behavior: "smooth",  
                    block: "end" ,   
            });
        }
    },
    components:{
      topitem,
      bigcat,
      loginitem
    },
    // 获取浏览器滚轮
	mounted() {
		window.addEventListener('scroll', () => {
			this.top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
		});
        this.timer = setInterval(() => {
            if(this.Carouselchart < 5){
                this.Carouselchart++
            }else{
                this.Carouselchart = 1
            }
            
        }, 5000);
	},
    beforeDestroy(){
        clearInterval(this.timer) 
    },
	
	watch:{
        // 监听top值的变化
		top(newValue){
			// 等新值大于100的时候再做变化
            // console.log(newValue);
			if(newValue > 200){
				this.navShow = true;
			}else{
                this.navShow = false;
            }
            if(newValue < 887){
                this.catrightnum = 1;
            }else if( 887< newValue && newValue < 1594){
                this.catrightnum = 2;
            }else if(1594 < newValue && newValue < 2090){
                this.catrightnum = 3;
            }else if(2090 < newValue && newValue < 2700){
                this.catrightnum = 4;
            }else if(2700 < newValue && newValue < 3308){
                this.catrightnum = 5;
            }else if(3308 < newValue && newValue < 3700){
                this.catrightnum = 6;
            }else if(3700 < newValue ){
                this.catrightnum = 7;
            }
		}
	}
  }
</script>

<style lang="scss" scoped>
@import "../assets/css/public.css";

.item2 a:hover .item-box{
    opacity: 1;
    z-index: 20;
    transform: translateZ(0px);
    transition: all 0.5s linear 0.8s;
}
.item2 a:hover .if-img img{
    margin-top:-20px ;
    transform: translateZ(0px);
    transition: all 0.3s linear 0s;
}
.item-box{
    width: 242px;
    height: 386x;
    box-shadow: inset 0 0px 2px 1px #ffd1d8;
    z-index: 10;
    background-color: #fff;
    position: absolute;
    top:-20px ;
    left: -20px;
    opacity: 0;
    transform: translateZ(-100px);
}
.item-box .item-img {
    width: 242px;
    height: 120px;
    overflow: hidden;
}
.item-box .item-img:hover img {
    margin-top: -10px ;
    transition: all 0.2s linear 0s;
}
.item-box img {
   width: 110%;
   transition: all 0.2s linear 0s;
}
.item-box .item-lists {
    width: 210px;
    height: 150px;
    padding: 0px 16px 70px;
    position: relative;
}
.item-box .item-lists h3{
    width: 210px;
    height: 52px;
    padding: 14px 0 0 0;
    font-size: 14px;
    color: #333;
}
.item-box .item-lists .item-text{
    display: block;
    width: 32px;
    height: 24px;
    font-size: 12px;
    color: #fc6976;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 24px;
}
.item-box .item-lists .item-text span{
    font-size: 18px;
    color: #fc6976;
}
.item-box .item-lists ul{
    width: 100%;
    height: 24px;
    color: #666;
}
.item-box .item-lists ul li{
    float: left;
    font-size: 14px;
    width: 28px;
    color: #999;
    margin-right:2px ;
}
.item-box .item-lists ul li a{
    display: block;
    width: 28px;
    height: 24px;
}
.item-box .item-lists a{
    display: block;
    width: 100%;
    height: 24px;
    color: #999;
    font-size:12px;
    line-height: 24px;
}
.item-box .item-lists p{
    display: -webkit-box;
    width: 210px;
    height: 36px;
    color: #999;
    font-size:12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    position: absolute;
    bottom: 30px;
}
.item-box button{
    width: 200px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 16px;
    border: 0;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    margin-left:20px ;
    margin-bottom:10px ;
    position: relative;
}
.item-box button i{
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../assets/img/cat-stand2.png);
    background-size: 100%;
    position: absolute;
    top: -22px;
    left: 90px;
}

// <!-- 提示漫画弹框 -->
.text:hover .tips{
    display: block;
}
.package{
    display: inline-block;
    position: relative;
}
.tips {
    width: 320px;
    height: 208px;
    position: absolute;
    right: -340px;
    top: -95px;
    background-color: #fff;
    z-index: 100;
    box-shadow: 0 2px 10px 0 #ffb5c3;
    display: none;
    z-index: 10;
}
.tips img{
    display: inline-block;
    width: 138px;
    height: 184px;
    margin: 12px 12px 12px 12px;
    vertical-align: top;
}
.tips .subject{
    display: inline-block;
    width: 142px;
    height: 184px;
    padding: 12px 12px 12px 4px;
    position: relative;
    
}
.tips .subject h3{
    font-size: 14px;
    color: #333;
    width: 142px;
    height: 20px;
    padding: 4px 0 2px 0;
    font-weight: 400;
}
.tips .subject h3:hover a{
    color: #fc6976;
}
.tips .subject ul{
    width: 142px;
    height: 18px;
    padding-top:4px; ;
    color: #999;
    
}
.tips .subject ul li{
    float: left;
    width: 24px;
    height: 16px;
    color: #999;
    font-size: 12px;
    line-height: 16px;
    margin: 0;
    margin-right:2px ;
}
.tips .subject ul li a{
    display: block;
    width: 24px;
    height: 16px;
    color: #999;
    font-size: 12px;
    line-height: 16px;
}
.tips .subject ul li:hover a{
    color: #fc6976;
}
.tips .subject p{
    width: 142px;
    height: 14px;
    color: #999;
    font-size: 12px;
    padding:4px 0px ;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px;
}
.tips .subject .sun{
    width: 142px;
    height: 16px;
    color: #999;
    font-size: 12px;
    padding-top:2px ;
    line-height: 16px;
    position: absolute;
    bottom: 34px;
}
.tips .subject .gx{
    width: 142px;
    height: 14px;
    color: #999;
    font-size: 12px;
    padding:4px 0px ;
    line-height: 14px;
    position: absolute;
    bottom: 12px;
}
.tips .subject .gx a{
    display: inline-block;
    height: 16px;
    vertical-align: top;
    line-height: 16px;
    color: #fc6976;
}
.tips .subject em{
    display: block;
    width: 24px;
    height: 40px;
    position: absolute;
    top: 90px;
    left: -186px;
    background: url(../assets/img/bf.png) 0px -169px no-repeat;
}
.disply{
    display: block;
}
</style>
